import Vue from 'vue'
import Component from 'vue-class-component'
import './orderStyle.css'
import OrderProductClass from './component/orderProduct.js'
import {OrderProductItem} from './component/orderItem.js'
import {formatDateDetail} from '@/utils/commonMethod/method.js'
import Platform from '@/supports/platform'
import OrderHandle from './orderMethod.js'

@Component
export default class OrderDetailClass extends Vue {
  productList = []
  wrapperHeight = 0
  orderId = ''
  order = {}

  buttonName = ''
  hiddenBuy = false
  showRightBtn = true
  orderStatus = ''
  cancelName = '取消订单'
  pArr = []
  statusSubTitle=''

  deposit = 0
  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
  }

  activated () {
    this.orderId = this.$route.params.orderId
    this.order = {}
    this.pArr = []
    this.orderStatus = ''
    this.getData()
  }

  mounted() {
    window.payResult = this.payResult
  }

  payResult (result) {
    if (result) {
      // Toast('支付成功')
      eventBus.$emit('orderListUpdate', 'refresh')
      this.$router.go(-1)
    } else {
      // Toast('支付失败')
    }
  }

  async getData() {
    try {
      const response = await this.$axios.post('/platform/v1/order', {orderNo: this.orderId})
      if (response.status === 0) {
        this.order = response.data
        this.orderStatus = this.order.orderStatus
        let string = this.order.shipping.shippingDescription.replace(/\\n/g, '<br>')
        this.pArr = string.split('<br>')
        if (this.order.prices && this.order.prices.depositAmount) {
          this.deposit = this.order.prices.depositAmount
        }
        this.handleStatues()
      }
    } catch (e) {

    }
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  get replaceString () {
    return this.order.shipping.shippingDescription.replace(/\\n/g, '<br>')
  }

  // 查看订单跟踪
  handleFollowOrder () {
    if (this.orderStatus === 1 || this.orderStatus === -3) {

    } else {
      // 跳转
      this.$router.push({name: 'orderFollow', params: {orderNo: this.order.orderNo}})
    }
  }

  handleStatues() {
    switch (this.orderStatus) {
      case -3: {
        this.buttonName = '再次购买'
        this.hiddenBuy = false
        this.statusSubTitle = '买家已经取消订单'
      }
        break
      case 1 :
        {
          this.buttonName = '去支付'
          this.hiddenBuy = true
          this.statusSubTitle = '下单后半个小时内支付'
        }
        break
      case -2:case 2:case 3:case 31:case 35:case 36:case 71:case 72:
        {
          this.buttonName = '订单追踪'
          this.showRightBtn = false
          this.hiddenBuy = false
        }
        break
      case 4:
        {
          this.buttonName = '确认收货'
          this.hiddenBuy = false
          this.cancelName = '订单追踪'
        }
        break

      case 33:case 73:
        {
          this.buttonName = '申请退款'
          this.hiddenBuy = false
          this.cancelName = '订单追踪'
        }
        break

      case 5:case 6:
        {
          this.buttonName = '再次购买'
          this.hiddenBuy = false
          this.cancelName = '订单追踪'
        }
        break
      default : {

      }
    }
  }

  handlerSure (e) {
    e.stopPropagation()
    switch (this.orderStatus) {
      case -3:case 5:case 6:
        {
          // '再次购买'
          OrderHandle.handleBuyAgain(this.order.products)
        }
        break
      case 1 :
        {
          // '去支付'
          OrderHandle.handleGoPay(this.order)
        }
        break
      case -2:case 2:case 3:case 31:case 35:case 36:case 71:case 72:
        {
          // '订单追踪'
          OrderHandle.handleFollowOrder()
        }
        break
      case 4:
        {
          // '确认收货'
          OrderHandle.handleMakeSure(this.order.orderNo)
        }
        break

      case 33:case 73:
        {
          // '申请退款'
          OrderHandle.handleRefund()
        }
        break
      default : {

      }
    }
  }

  handleCopy () {
    Platform.iOSCopy(this.order.orderNo)
  }

  handlerCancel (e) {
    e.stopPropagation()
    this.orderStatus = this.order.orderStatus
    switch (this.orderStatus) {
      case 4:case 33:case 73: case 5:case 6:
        {
          // '订单追踪'
          OrderHandle.handleFollowOrder()
        }
        break
      default : {
        OrderHandle.handleCancel(this.order.orderNo)
      }
    }
  }

  createProductItem () {
    if (!this.order.products || this.order.products.length <= 0) {
      return
    }
    return <OrderProductItem products={this.order.products}></OrderProductItem>
  }

  createdOrderStatus () {
    if (this.order.orderStatus !== -3 || this.order.orderStatus !== 1) {
      if (!this.order.orderTrace) {
        return
      }
    }
    return <div onClick={this.handleFollowOrder} class = 'orderDetailStatusClass' style='margin-top:10px'>
      <div style='margin-left:15px;margin-top:5px;padding-right:5px'>
        <icon name= 'orderIcon' scale='2'/>
      </div>

      <div class='orderDetailStatusInfoClass'>
        <p style='font-size:0.8em;color:#333;'>订单状态:<font style='padding-left:10px;font-size:0.85em;color:#ff4545;'>{this.order.statusText}</font></p>
        {(this.order.orderStatus === -3 || this.order.orderStatus === 1) ? <p style='font-size:0.7em;color:#666;'>{this.statusSubTitle}</p> : <div><p style='font-size:0.7em;color:#666;'>{this.order.orderTrace.context}</p>
        <p style='font-size:0.7em;color:#666;'>{this.order.orderTrace.time}</p></div>
      }
      </div>

      <div v-show={this.order.orderStatus !== -3 && this.order.orderStatus !== 1} style='line-height:80px;margin-right:12px'>
        <icon name= 'rightArrow' scale='1.5'/>
      </div>
    </div>
  }

  createOrderDetailAddress () {
    if (!this.order.address) {
      return
    }
    return <div style='margin-top:10px' class ='orderDetailStatusClass'>
      <div style='margin-left:15px;margin-top:4px;padding-right:5px'>
        <icon name= 'locationIcon' scale='2.5'/>
      </div>
      <div class='orderDetailStatusInfoClass' style='padding:4px 0'>
        <p style='font-size:0.8em;color:#333;'>收货人: {this.order.address.consigneeName}<font style='padding-left:10px;font-size:0.8em;color:#333;'>{this.order.address.consigneePhone}</font></p>
        <p style='font-size:0.7em;color:#666;'>{this.order.address.address}</p>
      </div>
    </div>
  }

  createdOterInfo() {
    if (!this.order || !this.order.shipping || this.order.shipping.shippingDescription.length <= 0) {
      return
    }
    return <div class='orderDetailOtherInfo'>
            <p>配送方式<font>{this.order.shipping.shippingTitle}</font></p>
            <p class = 'oderDetailPClass'>
              {this.createP()}
            </p>
          </div>
  }

  createP() {
    if (!this.pArr || this.pArr.length <= 0) {
      return
    }
    const item = this.pArr.map(value => {
      return <p>{value}</p>
    })
    return item
  }

  get otherPrice() {
    if (this.order.prices.currencyLogo !== '￥' && this.order.prices.totalCurrencyShowPrice && this.order.prices.totalCurrencyShowPrice.length > 0) {
      return '(' + this.order.prices.currencyLogo + this.order.prices.totalCurrencyShowPrice + ')'
    }
    return ''
  }

  createPayInfo () {
    if (!this.order.prices) {
      return
    }
    return <div class ='orderDetailPayInfoClass'>
            <p>商品金额<font>￥{this.order.prices.productAmount}{this.otherPrice}</font></p>
            <p>汇率<font>{this.order.prices.exchangeRate}</font></p>
            <p>服务费<font>￥{this.order.prices.totalServicePrice}</font></p>
            <p>运费<font>￥{this.order.prices.deliveryFee}</font></p>
            <p v-show={this.deposit > 0} >已付订金<font>-￥{this.deposit}</font></p>
            <p>应付总额 <font style='color:#ff4545'>￥{this.order.amountPayable}</font></p>
        </div>
  }

  createBottomInfo() {
    return <div class = 'orderDetailBottomClass'>
              <p>订单编号：{this.order.orderNo}<font onClick={this.handleCopy}>复制</font></p>
              <p>下单时间：{formatDateDetail(this.order.submitTime)}</p>
          </div>
  }

  createBottomBtn () {
    return <div class = 'orderDetailBottomBtnClass'>
            <span v-show={this.showRightBtn} onClick={this.handlerSure}>{this.buttonName}</span>
            <span v-show={this.hiddenBuy} style='margin:0px 10px' onClick={this.handlerCancel}>{this.cancelName}</span>
        </div>
  }

  render () {
    return (
      <div class='content' style={this.caculateHeight + ';overflow:auto;margin-top:64px;'}>
        <mt-header class='header' fixed title="详情">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        {this.createdOrderStatus()}

        {this.createOrderDetailAddress()}

        <div style='margin-top:10px'>
          {this.createProductItem()}
        </div>

        {this.createdOterInfo()}
        {this.createPayInfo()}
        {this.createBottomInfo()}
        {this.createBottomBtn()}
      </div>
    )
  }
}
